-
Notifications
You must be signed in to change notification settings - Fork 38
feat: 新增仿notion设计的markdown编辑器 #230
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
…ackage.json and pnpm-lock.yaml
…ut handling and user feedback
…ok to selectively stage changes after image migration
…son and pnpm-lock.yaml
…signed URL generation
…ckage.json and update pnpm-lock.yaml
… synchronization and user experience
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@Crokily is attempting to deploy a commit to the longsizhuo's projects Team on Vercel. A member of the Team first needs to authorize it. |
…layout visibility
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR introduces a comprehensive Notion-style markdown editor for user article submissions, integrating Cloudflare R2 for image uploads, along with several infrastructure improvements and bug fixes.
Key Changes:
- New Milkdown-based markdown editor with real-time preview and drag-and-drop image support
- R2 integration for automatic image uploads with presigned URLs
- Enhanced authentication flow with callback URL support and dedicated login page
- Fixed Shiki code highlighting case-sensitivity issues via remark plugin
- Improved pre-commit hooks to respect staged files
Reviewed changes
Copilot reviewed 23 out of 25 changed files in this pull request and generated 16 comments.
Show a summary per file
| File | Description |
|---|---|
| source.config.ts | Adds remark plugin to normalize code block language identifiers and updates image handling configuration with detailed documentation |
| next.config.mjs | Disables Next.js image optimization due to Vercel quota limits, removes conflicting remarkImage configuration |
| package.json | Adds Milkdown editor dependencies (@milkdown/crepe, @milkdown/kit), AWS SDK for R2 integration, and mdast types |
| mdx-components.tsx | Overrides default img component to use native HTML img tags instead of Next.js Image component |
| lib/submission.ts | New utility functions for filename validation and markdown extension handling |
| lib/editor-store.ts | Zustand store for managing editor state (title, description, tags, markdown content) |
| auth.config.ts | Adds /editor route protection and implements redirect callback for post-login navigation |
| app/login/page.tsx | New login page that accepts redirectTo/callbackUrl parameters for seamless navigation after authentication |
| app/editor/page.tsx | Server component that verifies authentication and renders editor client component |
| app/editor/EditorPageClient.tsx | Main editor UI orchestrating metadata form, directory selection, markdown editor, and publish workflow |
| app/components/MarkdownEditor.tsx | Milkdown editor wrapper with image buffer integration and auto-sync to store |
| app/components/EditorMetadataForm.tsx | Form component for article metadata (title, description, tags, filename) |
| app/components/DocsDestinationForm.tsx | Tree-based directory selector for choosing submission destination |
| app/components/hooks/useImageBuffer.ts | Custom hook for managing local image cache before upload |
| app/components/SignInButton.tsx | Updated to accept redirectTo parameter for post-login navigation |
| app/components/Contribute.tsx | Modified "我要投稿" button to navigate directly to /editor instead of opening dialog |
| app/components/contribute/tree-utils.tsx | Extracted tree utility functions for reuse across components |
| app/api/upload/route.ts | New API endpoint generating R2 presigned URLs for client-side image uploads |
| app/globals.css | Comprehensive Milkdown editor styling with dark mode and responsive support |
| .husky/pre-commit | Updated to only stage migration-generated changes instead of all modified files |
| .gitignore | Updated AGENTS.md pattern and added .claude directory |
| .env.sample | Added R2 configuration variables (account ID, access keys, bucket, public URL) |
| .github/workflows/sync-uuid.yml | Formatting improvement for multi-line condition |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
我觉得安全的事情可以稍微放一放,毕竟没那么多人为了打爆图床来的。而且我记得图床上应该也可以限制大小来避免恶意使用的 |
87b57d7 to
608d26b
Compare
608d26b to
d8ac95b
Compare
主要还是R2图床不支持限制文件大小 这几天我在cf社区上看到有人说可以用post预签名的方式来实现限制上传文件,我实现了(Crokily:feat/Crokily/PostURL)以后发现一直不行,查了文档才发现R2也不支持POST预签名,这个是AWS S3的功能,哈哈哈:https://developers.cloudflare.com/r2/api/s3/presigned-urls/ 最后确认,安全的事情先放一放了。大概情况如下 为了节省vercel资源,上传策略采用的是不经过后端的预签名URL模式,因此文件会直接从前端进入图床,节省后端资源,也避免了后端直接被传文件攻击的问题,因此后端没有做文件大小和类型的限制,因为后端不涉及。 但这也确实有可能存在图床会被打爆的问题。 目前解决方案:
根据当前项目的资源情况考虑,还是暂时不动安全这块,后续优化的时候再换worker方式处理 |
开发方案见:https://www.notion.so/MD-2a39919329548107a259c6a1cec5a089
除了按方案完成了编辑器以外
还执行了以下可能阻塞开发的修复
JavaScript的代码段就无法识别,导致系统build出错,必须javasciprt才行,因为考虑到用户的自用的编辑器也有可能会有使用JavaScript等大写代码段,所以最好的解决办法是加个remark插件,每次对md,mdx文件做统一处理转换大小写。后续计划
预览
由于R2的CORS规则问题,只加了localhost,involutionhell到白名单,因此预览的随机vercel路径是没法使用上传功能的。
请拉到本地部署测试
测试流程
env